<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON生成器 - 多项目独立日期设置</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1000px;
            padding: 30px;
        }
        
        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .description {
            text-align: center;
            color: #7f8c8d;
            margin-bottom: 30px;
            font-size: 16px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #2c3e50;
        }
        
        select, input {
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        select:focus, input:focus {
            outline: none;
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
        }
        
        /* 项目选择区域 */
        .project-selection {
            margin-bottom: 20px;
        }
        
        .project-checkboxes {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 10px;
        }
        
        .project-checkbox {
            display: flex;
            align-items: center;
            background: #f8f9fa;
            padding: 10px 15px;
            border-radius: 6px;
            border: 1px solid #e9ecef;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .project-checkbox:hover {
            background: #e9ecef;
        }
        
        .project-checkbox.selected {
            background: #3498db;
            color: white;
            border-color: #2980b9;
        }
        
        .project-checkbox input {
            margin-right: 8px;
        }
        
        /* 用户信息区域 - 单行布局 */
        .user-info-single-row {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: flex-end;
        }
        
        .user-info-group {
            flex: 1;
        }
        
        .user-info-group label {
            margin-bottom: 5px;
        }
        
        /* 项目日期设置区域 */
        .project-dates {
            display: none;
            margin-top: 20px;
            border-top: 1px solid #e9ecef;
            padding-top: 20px;
        }
        
        .project-date-item {
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e9ecef;
        }
        
        .project-date-header {
            display: flex;
            justify-content: between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .project-name {
            font-weight: 600;
            color: #2c3e50;
        }
        
        /* 日期选择器单行布局 */
        .date-picker-row {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .date-picker-group {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }
        
        .date-picker-group label {
            min-width: 70px;
            margin-bottom: 0;
            font-size: 14px;
            color: #555;
        }
        
        .date-picker-group input {
            flex: 1;
        }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 30px;
        }
        
        button {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .copy-btn {
            background-color: #2ecc71;
            color: white;
        }
        
        .copy-btn:hover {
            background-color: #27ae60;
        }
        
        .reset-btn {
            background-color: #e74c3c;
            color: white;
        }
        
        .reset-btn:hover {
            background-color: #c0392b;
        }
        
        .result-container {
            margin-top: 30px;
        }
        
        .result-title {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        #jsonResult {
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 6px;
            padding: 15px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            max-height: 300px;
            overflow-y: auto;
            font-size: 14px;
            line-height: 1.5;
            min-height: 150px;
        }
        
        .success-message {
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            display: none;
        }
        
        .error-message {
            background-color: #f8d7da;
            color: #721c24;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            display: none;
        }
        
        .selection-info {
            margin-top: 8px;
            font-size: 14px;
            color: #7f8c8d;
        }
        
        .auto-update-notice {
            background-color: #fff3cd;
            color: #856404;
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
            font-size: 14px;
            border: 1px solid #ffeaa7;
        }
        
        @media (max-width: 600px) {
            .user-info-single-row {
                flex-direction: column;
                gap: 10px;
            }
            
            .date-picker-row {
                flex-direction: column;
                gap: 10px;
            }
            
            .date-picker-group {
                width: 100%;
            }
            
            .button-group {
                flex-direction: column;
            }
            
            .project-checkboxes {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JSON生成器</h1>
        <p class="description">为多个项目分别设置时间范围并生成JSON数据</p>
        
        <div class="form-group user-info-single-row">
            <div class="user-info-group">
                <label for="userName">姓名</label>
                <input type="text" id="userName" placeholder="请输入姓名">
            </div>
            <div class="user-info-group">
                <label for="userEmail">邮箱</label>
                <input type="email" id="userEmail" placeholder="请输入邮箱">
            </div>
        </div>
        
        <div class="form-group project-selection">
            <label>选择项目 (可多选)</label>
            <div class="project-checkboxes" id="projectCheckboxes">
                <!-- 项目复选框将由JavaScript动态生成 -->
            </div>
            <div class="selection-info" id="selectionInfo">已选择 0 个项目</div>
        </div>
        
        <div class="project-dates" id="projectDates">
            <h3>设置各项目时间范围</h3>
            <!-- 项目日期设置区域将由JavaScript动态生成 -->
        </div>
        
        <div class="auto-update-notice">
            JSON数据将自动更新，无需手动生成
        </div>
        
        <div class="button-group">
            <button class="copy-btn" id="copyBtn">复制JSON</button>
            <button class="reset-btn" id="resetBtn">重置</button>
        </div>
        
        <div class="result-container" id="resultContainer">
            <div class="result-title">生成的JSON数据</div>
            <pre id="jsonResult">请选择项目并设置日期范围</pre>
            <div class="success-message" id="successMessage">JSON数据已成功复制到剪贴板！</div>
            <div class="error-message" id="errorMessage">请至少选择一个项目并设置日期！</div>
        </div>
    </div>

    <script>
        // 默认数据
        var defaultData = [
            {
                "project": "xwlb",
                "name": "新闻联播",
                "begin": "2025年11月5日",
                "end": "2025年12月5日",
                "begin_timestamp": 1762303804,
                "end_timestamp": 1762304804
            },
            {
                "project": "rmrb",
                "name": "人民日报",
                "begin": "2025年11月5日",
                "end": "2025年12月5日",
                "begin_timestamp": 1762303804,
                "end_timestamp": 1762304804
            }
        ];
        
        // 项目数据
        var projects = [
            { value: 'xwlb', text: '新闻联播 (xwlb)', name: '新闻联播' },
            { value: 'cls', text: '财联社 (cls)', name: '财联社' },
            { value: 'rmrb', text: '人民日报 (rmrb)', name: '人民日报' },
            { value: 'xhs', text: '新华社 (xhs)', name: '新华社' }
        ];
        
        // 用户数据
        var userData = [
            { name: '赵一', email: '315121962@qq.com' },
            { name: '钱二', email: '912319049@qq.com' }
        ];
        
        // 存储项目日期数据
        var projectDateData = {};
        
        // 初始化函数
        function init() {
            var projectCheckboxes = document.getElementById('projectCheckboxes');
            var projectDates = document.getElementById('projectDates');
            var copyBtn = document.getElementById('copyBtn');
            var resetBtn = document.getElementById('resetBtn');
            var jsonResult = document.getElementById('jsonResult');
            var resultContainer = document.getElementById('resultContainer');
            var successMessage = document.getElementById('successMessage');
            var errorMessage = document.getElementById('errorMessage');
            var selectionInfo = document.getElementById('selectionInfo');
            var userNameInput = document.getElementById('userName');
            var userEmailInput = document.getElementById('userEmail');
            
            // 初始化用户数据
            initUserData(userNameInput, userEmailInput);
            
            // 初始化项目日期数据
            initProjectDateData();
            
            // 渲染项目复选框
            renderProjectCheckboxes(projectCheckboxes);
            
            // 设置默认选中项目
            setDefaultSelectedProjects();
            
            // 渲染项目日期设置区域
            renderProjectDates();
            
            // 初始生成JSON
            generateJSON();
            
            // 用户信息变化时生成JSON
            userNameInput.addEventListener('input', generateJSON);
            userEmailInput.addEventListener('input', generateJSON);
            
            // 复制JSON
            copyBtn.addEventListener('click', function() {
                if (!jsonResult.textContent || jsonResult.textContent.indexOf('请选择项目') === 0) {
                    alert('请先选择项目并设置日期');
                    return;
                }
                
                // 使用传统方法复制文本
                var textArea = document.createElement('textarea');
                textArea.value = jsonResult.textContent;
                document.body.appendChild(textArea);
                textArea.select();
                
                try {
                    var successful = document.execCommand('copy');
                    if (successful) {
                        successMessage.style.display = 'block';
                        errorMessage.style.display = 'none';
                        setTimeout(function() {
                            successMessage.style.display = 'none';
                        }, 3000);
                    } else {
                        alert('复制失败，请手动复制JSON数据');
                    }
                } catch (err) {
                    console.error('复制失败: ', err);
                    alert('复制失败，请手动复制JSON数据');
                }
                
                document.body.removeChild(textArea);
            });
            
            // 重置表单
            resetBtn.addEventListener('click', function() {
                // 重置所有复选框
                var checkboxes = document.querySelectorAll('.project-checkbox input');
                for (var i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].checked = false;
                }
                
                // 重置日期区域
                projectDates.style.display = 'none';
                
                // 重置选择信息
                updateSelectionInfo();
                
                // 重置用户信息
                initUserData(userNameInput, userEmailInput);
                
                // 隐藏结果区域
                successMessage.style.display = 'none';
                errorMessage.style.display = 'none';
                
                // 重新设置默认选中项目
                setDefaultSelectedProjects();
                renderProjectDates();
                
                // 重新生成JSON
                generateJSON();
            });
        }
        
        // 初始化用户数据
        function initUserData(nameInput, emailInput) {
            // 使用默认用户数据
            nameInput.value = userData[0].name;
            emailInput.value = userData[0].email;
        }
        
        // 初始化项目日期数据
        function initProjectDateData() {
            for (var i = 0; i < projects.length; i++) {
                var project = projects[i];
                projectDateData[project.value] = {
                    begin: '',
                    end: ''
                };
            }
            
            // 设置默认数据的日期
            for (var i = 0; i < defaultData.length; i++) {
                var data = defaultData[i];
                // 将中文日期转换为标准日期格式
                var beginDate = convertChineseDateToStandard(data.begin);
                var endDate = convertChineseDateToStandard(data.end);
                
                if (beginDate && endDate) {
                    projectDateData[data.project] = {
                        begin: beginDate,
                        end: endDate
                    };
                }
            }
        }
        
        // 设置默认选中项目
        function setDefaultSelectedProjects() {
            // 默认选中新闻联播和人民日报
            var defaultProjects = ['xwlb', 'rmrb'];
            
            for (var i = 0; i < defaultProjects.length; i++) {
                var checkbox = document.getElementById('project_' + defaultProjects[i]);
                if (checkbox) {
                    checkbox.checked = true;
                }
            }
            
            updateSelectionInfo();
        }
        
        // 渲染项目复选框
        function renderProjectCheckboxes(container) {
            // 清空现有内容
            container.innerHTML = '';
            
            // 添加项目复选框
            for (var i = 0; i < projects.length; i++) {
                var project = projects[i];
                
                var checkboxContainer = document.createElement('div');
                checkboxContainer.className = 'project-checkbox';
                
                var checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.id = 'project_' + project.value;
                checkbox.value = project.value;
                checkbox.addEventListener('change', function() {
                    handleProjectSelectionChange();
                    generateJSON(); // 自动生成JSON
                });
                
                var label = document.createElement('label');
                label.htmlFor = 'project_' + project.value;
                label.textContent = project.text;
                
                checkboxContainer.appendChild(checkbox);
                checkboxContainer.appendChild(label);
                container.appendChild(checkboxContainer);
            }
        }
        
        // 处理项目选择变化
        function handleProjectSelectionChange() {
            updateSelectionInfo();
            renderProjectDates();
        }
        
        // 获取选中的项目
        function getSelectedProjects() {
            var selected = [];
            var checkboxes = document.querySelectorAll('.project-checkbox input:checked');
            
            for (var i = 0; i < checkboxes.length; i++) {
                selected.push(checkboxes[i].value);
            }
            
            return selected;
        }
        
        // 更新选择信息
        function updateSelectionInfo() {
            var selectedCount = getSelectedProjects().length;
            var selectionInfo = document.getElementById('selectionInfo');
            selectionInfo.textContent = '已选择 ' + selectedCount + ' 个项目';
            
            // 高亮显示选择状态
            if (selectedCount === 0) {
                selectionInfo.style.color = '#e74c3c';
            } else {
                selectionInfo.style.color = '#7f8c8d';
            }
        }
        
        // 渲染项目日期设置区域
        function renderProjectDates() {
            var projectDates = document.getElementById('projectDates');
            var selectedProjects = getSelectedProjects();
            
            if (selectedProjects.length === 0) {
                projectDates.style.display = 'none';
                return;
            }
            
            projectDates.style.display = 'block';
            
            // 清空现有内容
            projectDates.innerHTML = '<h3>设置各项目时间范围</h3>';
            
            // 添加每个选中项目的日期设置
            for (var i = 0; i < selectedProjects.length; i++) {
                var projectValue = selectedProjects[i];
                var project = getProjectByValue(projectValue);
                
                var dateItem = document.createElement('div');
                dateItem.className = 'project-date-item';
                
                var dateHeader = document.createElement('div');
                dateHeader.className = 'project-date-header';
                
                var projectName = document.createElement('div');
                projectName.className = 'project-name';
                projectName.textContent = project.text;
                
                dateHeader.appendChild(projectName);
                
                // 日期选择器单行布局
                var datePickerRow = document.createElement('div');
                datePickerRow.className = 'date-picker-row';
                
                // 开始日期
                var beginDateGroup = document.createElement('div');
                beginDateGroup.className = 'date-picker-group';
                
                var beginLabel = document.createElement('label');
                beginLabel.textContent = '开始日期';
                beginLabel.htmlFor = 'beginDate_' + projectValue;
                
                var beginInput = document.createElement('input');
                beginInput.type = 'date';
                beginInput.id = 'beginDate_' + projectValue;
                beginInput.value = projectDateData[projectValue].begin || getDefaultBeginDate();
                beginInput.addEventListener('change', function() {
                    var projectVal = this.id.replace('beginDate_', '');
                    projectDateData[projectVal].begin = this.value;
                    generateJSON(); // 自动生成JSON
                });
                
                beginDateGroup.appendChild(beginLabel);
                beginDateGroup.appendChild(beginInput);
                
                // 结束日期
                var endDateGroup = document.createElement('div');
                endDateGroup.className = 'date-picker-group';
                
                var endLabel = document.createElement('label');
                endLabel.textContent = '结束日期';
                endLabel.htmlFor = 'endDate_' + projectValue;
                
                var endInput = document.createElement('input');
                endInput.type = 'date';
                endInput.id = 'endDate_' + projectValue;
                endInput.value = projectDateData[projectValue].end || getDefaultEndDate();
                endInput.addEventListener('change', function() {
                    var projectVal = this.id.replace('endDate_', '');
                    projectDateData[projectVal].end = this.value;
                    generateJSON(); // 自动生成JSON
                });
                
                endDateGroup.appendChild(endLabel);
                endDateGroup.appendChild(endInput);
                
                datePickerRow.appendChild(beginDateGroup);
                datePickerRow.appendChild(endDateGroup);
                
                dateItem.appendChild(dateHeader);
                dateItem.appendChild(datePickerRow);
                
                projectDates.appendChild(dateItem);
            }
        }
        
        // 生成JSON数据
        function generateJSON() {
            var jsonResult = document.getElementById('jsonResult');
            var errorMessage = document.getElementById('errorMessage');
            var selectedProjects = getSelectedProjects();
            var userName = document.getElementById('userName').value;
            var userEmail = document.getElementById('userEmail').value;
            
            if (selectedProjects.length === 0) {
                jsonResult.textContent = '请选择项目并设置日期范围';
                errorMessage.style.display = 'none';
                return;
            }
            
            // 验证日期
            var hasError = false;
            var errorMsg = '';
            var validProjects = [];
            
            for (var i = 0; i < selectedProjects.length; i++) {
                var project = selectedProjects[i];
                var beginDate = document.getElementById('beginDate_' + project);
                var endDate = document.getElementById('endDate_' + project);
                
                // 检查日期输入框是否存在
                if (!beginDate || !endDate) {
                    continue;
                }
                
                var beginDateValue = beginDate.value;
                var endDateValue = endDate.value;
                
                if (!beginDateValue || !endDateValue) {
                    hasError = true;
                    errorMsg = '请为所有选中的项目设置开始和结束日期！';
                    break;
                }
                
                if (new Date(beginDateValue) > new Date(endDateValue)) {
                    hasError = true;
                    errorMsg = '开始日期不能晚于结束日期！';
                    break;
                }
                
                validProjects.push(project);
            }
            
            if (hasError) {
                errorMessage.textContent = errorMsg;
                errorMessage.style.display = 'block';
                jsonResult.textContent = '错误：' + errorMsg;
                return;
            }
            
            errorMessage.style.display = 'none';
            
            // 生成JSON数据 - 新的数据结构
            var jsonData = {
                "name": userName,
                "email": userEmail,
                "projects": []
            };
            
            for (var i = 0; i < validProjects.length; i++) {
                var project = validProjects[i];
                var beginDate = document.getElementById('beginDate_' + project).value;
                var endDate = document.getElementById('endDate_' + project).value;
                
                var beginTimestamp = Math.floor(new Date(beginDate).getTime() / 1000);
                var endTimestamp = Math.floor(new Date(endDate).getTime() / 1000);
                
                // 获取项目名称
                var projectObj = getProjectByValue(project);
                var projectName = projectObj ? projectObj.name : project;
                
                jsonData.projects.push({
                    "project": project,
                    "begin": formatDateForDisplay(new Date(beginDate)),
                    "end": formatDateForDisplay(new Date(endDate)),
                    "begin_timestamp": beginTimestamp,
                    "end_timestamp": endTimestamp
                });
            }
            
            jsonResult.textContent = JSON.stringify(jsonData, null, 2);
        }
        
        // 根据值获取项目对象
        function getProjectByValue(value) {
            for (var i = 0; i < projects.length; i++) {
                if (projects[i].value === value) {
                    return projects[i];
                }
            }
            return null;
        }
        
        // 获取默认开始日期（今天）
        function getDefaultBeginDate() {
            return formatDate(new Date());
        }
        
        // 获取默认结束日期（一个月后）
        function getDefaultEndDate() {
            var oneMonthLater = new Date();
            oneMonthLater.setMonth(oneMonthLater.getMonth() + 1);
            return formatDate(oneMonthLater);
        }
        
        // 辅助函数：将日期格式化为YYYY-MM-DD
        function formatDate(date) {
            var year = date.getFullYear();
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var day = String(date.getDate()).padStart(2, '0');
            return year + '-' + month + '-' + day;
        }
        
        // 辅助函数：将日期格式化为YYYY年MM月DD日
        function formatDateForDisplay(date) {
            var year = date.getFullYear();
            var month = String(date.getMonth() + 1).padStart(2, '0');
            var day = String(date.getDate()).padStart(2, '0');
            return year + '年' + month + '月' + day + '日';
        }
        
        // 将中文日期转换为标准日期格式
        function convertChineseDateToStandard(chineseDate) {
            // 简单的中文日期转换，实际应用中可能需要更复杂的处理
            var match = chineseDate.match(/(\d{4})年(\d{1,2})月(\d{1,2})日/);
            if (match) {
                var year = match[1];
                var month = match[2].padStart(2, '0');
                var day = match[3].padStart(2, '0');
                return year + '-' + month + '-' + day;
            }
            return null;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>
